<!DOCTYPE html> 
<?php
$language = $_COOKIE['lang'];

$script = "";

$script = $script . "\n" . '<script type="text/javascript"> ' . "\n language = '" . $language . "';\n";

echo $script . '</script>';

include('../Include/functions.inc.php');
include('../Include/translations.php');

?>
<html> 
	<head>
            
            <title>Google Map Localisation</title>
		<meta name="keywords" content="Google maps, jQuery, plugin, mobile, iphone, ipad, android, HTML5, Geo search, Google direction, Rilke Festival" />
		<meta name="description" content="Geo directions with jQuery mobile, Google maps and HTML5" />
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
               <link rel="stylesheet" href="../Include/CSS/jquery.override.css" type="text/css" />
                <style type="text/css">
			body {  background: #ddd; }
			.ui-body-c a.ui-link { color: #008595; font-weight: bold; text-decoration: none; }
			.hidden { display:none; }
			.min-width-480px label.ui-input-text { font-weight:bold; display: block; }
			.adp-directions { width:100%; }
			.adp-placemark, .adp-summary, .adp-legal { display:none; margin: 0; }
			.adp-placemark, .adp-step, .adp-stepicon, .adp-substep{ border-top: none;text-align:center; vertical-align: middle; padding: 0.8em 0; background:#e9eaeb;color:#3e3e3e;text-shadow:0 1px 1px #fff;background-image:-moz-linear-gradient(top,#f0f0f0,#e9eaeb);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(1,#e9eaeb));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"}
			.adp-directions tr { border:1px solid #b3b3b3; }
			h2 { font-size: 16px; overflow: hidden; white-space: nowrap; display: block; }
			.more { text-align: center; }
		</style>
		
                <!--Script chargement de l'API et de jQuery-->
                <script src="http://www.google.com/jsapi?key=ABQIAAAAZvVFYh6U6bU7VWm4DjkFQhTgjVMmxrH4oWOIWZcyWXVAXdAhwBQKeviHUBcudMwxrY0qXyz4l8_W4w" type="text/javascript"></script>        
                <script type="text/javascript">
                   
                    if (language!=null && language!="")
                    {                  
                        google.load("maps", "3", {'other_params':'sensor=true'}, {'language' : language});
                    
                        google.load("jquery", "1.5");
                    }
                
                </script>
                
                <!-- Activation ajax sur mobile-->
		<script type="text/javascript">
			
			$(document).bind("mobileinit", function () {
				$.mobile.ajaxEnabled  = true;
			});
		</script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
		<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
	</head> 

        <body> 
            
            <div id="gmap-3" data-role="page">
                <div id="banner" onchange="javascript:getRootPath()" data-role="header" data-nobackbtn="false" class="ui-bar-custom ui-header" role="banner">
                    <br>
                    <div id="ui-titrePage1" class="banner ui-header-h1">Festival Rilke</div>
                    <div  id="dates" class="ui-header-h1"><?php
                            $dates = getDatesDebutEtFin();

                            $datesEdition = mysql_fetch_array($dates);

                            echo $datesEdition[0] . " - " . $datesEdition[1] . " " . $textes['mois'][$_COOKIE['lang']] . " " . $datesEdition[2];
?></div>
                    <a id="linkHome" style="margin-top: 17px;" rel="external" href="../../Rilke/index.php"  target='_self' data-icon="back" data-iconpos="notext" data-direction="reverse" class="ui-btn-left">Home</a>
                </div>
                <script type="text/javascript">
                    
       ////////////////////////////////////////////////////////////////////////////////////////////////////////
       ////Create direction google map
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
                            $('#gmap-3').live("pageshow", function() {
					
					$('#map_canvas_1').gmap( { 'center': getLatLng(), 'callback': 
						function (map) {
							if ( navigator.geolocation ) {
								watch = navigator.geolocation.watchPosition ( 
									function( position ) { 
                                                                            
										$('#map_canvas_1').gmap('clearMarkers');
										$('#map_canvas_1').gmap('addMarker', { 'title': 'Vous vous trouvez ici !', 'bound': true, 'position':new google.maps.LatLng(position.coords.latitude, position.coords.longitude) }, function(map, marker) {
											$('#map_canvas_1').gmap('addInfoWindow', { 'position': marker.getPosition(), 'content': 'Vous vous trouvez ici !' }, function(iw) {
												$(marker).click(function() {
													iw.open(map, marker);
                                                                                                        
												});
											});
											map.panTo( marker.getPosition()); 
                                                                                      
										});
									}
								);
							}
						}
                                           
					}); 
					
					function getLatLng() {
						if ( google.loader.ClientLocation != null ) {
							return new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);	
						}
						return new google.maps.LatLng(59.3426606750, 18.0736160278);
					}

				});
                                  
       ////////////////////////////////////////////////////////////////////////////////////////////////////////
       ////Create direction google map
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
				$('#gmap-3').live("pageshow", function() {
					$('#map_canvas_1').gmap({'center': getLatLng()});
					function getLatLng() {
						if ( google.loader.ClientLocation != null ) {
							return new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);	
						}
						return new google.maps.LatLng(59.3426606750, 18.0736160278);
					}
				});
				// To stop the click from looping into nonsense
				$('#gmap-3').live("pagecreate", function() {
					$('#submit').click(function() {
						$('#map_canvas_1').gmap('displayDirections', { 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(success, response) {
							
                                                        if ( success ) {
								$('#results').show();
							} else {
								$('#map_canvas_1').gmap('getService', 'DirectionsRenderer').setMap(null);
								$('#results').hide();
							}
						});
						return false;
					});
				});
                              
                            
                              
			</script>
			<div data-role="content">
				
				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
					
					<div id="map_canvas_1" style="height:300px;"></div>
				
					<p>
						<label for="from">From</label>
						<input id="from" class="ui-bar-c" value="Sierre, poste/gare" />
					</p>
					<p>
						<label for="to">To</label>
						<input id="to" class="ui-bar-c" value="Montée du Château 19, 3960 Sierre" />
					</p>
				
					<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
				</div>
				
				<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
					<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Résultats</div>
					<div onclick="javascript:scroll(0,0)" id="directions"></div>
                                        <div  class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
				</div>
				
				

			</div>
			
		
			
		</div>
            
            
		<script type="text/javascript">
                     
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		
	</body>
	
</html>